<template>
    <div class="home">
        <!--<div class="swipe-wrapper">-->
        <!--<van-swipe :autoplay="3000" indicator-color="" :height="160" class="swipe">-->
        <!--<van-swipe-item v-for="item,index in swipeImgUrls" :key="index"><img class="swipe-img" :src="item">-->
        <!--</van-swipe-item>-->
        <!--</van-swipe>-->
        <!--</div>-->
        <div class="content-activity">
            <van-swipe :autoplay="3000" indicator-color="" class="swipe">
                <van-swipe-item v-for="item,index in swipeImgUrls" :key="index">
                    <img :src="item.url">
                    <a :href="item.aurl"> </a>
                    <div class="clearboth"></div>
                </van-swipe-item>
            </van-swipe>
        </div>

        <!--<van-search-->
                <!--v-model="storeName"-->
                <!--:placeholder="storeNamePlaceHolder"-->
                <!--show-action-->
                <!--@search="onSearch"-->
                <!--style="height:50px;padding: 10px 10px;"-->
        <!--&gt;-->
            <!--<div slot="action" @click="onSearch">搜索</div>-->
        <!--</van-search>-->
        <!--{{userInfo}}-->
        <div class="grid-wrapper">
            <van-row type="flex" justify="space-around">
                <van-col class="grid-item" v-for="(item,index) in gridItems.slice(0,4)" :key="index" span="6">
                    <!--@click="toUrl(item)" -->
                    <div @click="goToView(item.link)">
                        <img class="icon" :src="item.icon">
                        <span class="title">{{item.title}}</span>
                    </div>
                </van-col>
            </van-row>

            <van-row type="flex" justify="space-around">
                <van-col class="grid-item" v-for="(item,index) in gridItems.slice(4,8)" :key="index" span="6">
                    <div @click="goToView(item.link)">
                        <img class="icon" :src="item.icon">
                        <span class="title">{{item.title}}</span>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="activity-wrapper">
            <div class="img-wrapper">
                <img :src="ad.url" class="bg-type" v-for="ad,idx in advertiseList" :key="idx" @click="goToUrl(ad.aurl)">
            </div>
        </div>
        <!--<van-button type="danger" @click="clearCache">清楚缓存</van-button>-->
    </div>
</template>

<script>
    import Vue from 'vue'
    import {mapGetters,mapActions} from 'vuex'
    import Cookies from 'js-cookie'
    import {baseUrl} from "../utils/global"
    import {Toast, Button} from 'vant'

    Vue.use(Toast)
    Vue.use(Button)
    export default {
        name: 'Home',
        data() {
            return {
                storeName: '',
                swipeImgUrls: [],
                advertiseList: [],
                gridItems: [
                    // {
                    //     link: '/coupon_list',
                    //     title: '优惠券',
                    //     icon: '/images/index/index1.png'
                    // },
                    {
                        link: '/performance',
                        title: '演艺中心',
                        icon: '/images/index/yy.png'
                    },
                    {
                        link: '/activityCalendar',
                        title: '热门活动',
                        icon: '/images/index/index2.png'
                    },
                    {
                        link: 'https://weidian.com/?userid=1386795757&distributorid=1292589238&wfr=wx_wxh5&ifr=shopdetail&share_relation=d886e1e688610ec2_1292589238_2',
                        title: '会员商城',
                        icon: '/images/index/index3.png'
                    },
                    {
                        link: '/traffic',
                        title: '交通指南',
                        icon: '/images/index/index6.png'
                    },
                    // {
                    //     link: '/integrallist',
                    //     title: '积分商城',
                    //     icon: '/images/index/index4.png'
                    // },
                    {
                        link: '/shopping',
                        title: '购物中心',
                        icon: '/images/index/gw.png'
                    },
                    {
                        link: '/recommend_activity',
                        title: '推荐有礼',
                        icon: '/images/index/index5.png'
                    },
                    // {
                    //     link: '/',
                    //     title: '票务中心',
                    //     icon: '/images/index/index5.png'
                    // },
                    {
                        link: '/dial',
                        title: '转盘抽奖',
                        icon: '/images/index/zp.png'
                    },
                    // {
                    //     link: '/',
                    //     title: '停车缴费',
                    //     icon: '/images/index/index7.png'
                    // }
                    {
                        link: '/hundred',
                        title: '怡翠·百年汇',
                        icon: '/images/index/index9.png'
                    }
                    // {
                    //     link: '/',
                    //     title: '免费wifi',
                    //     icon: '/images/index/index8.png'
                    // }
                ]
            }
        },
        created() {
            //此阶段会执行一次查询userInfo
            this.fetchUserInfo()
            this.showAD();
            this.fetchAdvertise();
        },
        computed: {
            ...mapGetters(['userInfo', 'appName', 'storeNamePlaceHolder']),
            baseUrl() {
                return baseUrl
            }
        },
        methods: {
            ...mapActions(['fetchUserInfo']),
            toUrl(item) {
                this.$router.push(item.link)
            },
            goToView(path) {
                if(path == '/'){
                    Toast("功能尚未开启，敬请期待！")
                }else if(path.indexOf("http") != -1){
                   window.location.href = path
                }else{
                    this.$router.push(path)
                }
            },
            goToUrl(url){
              if(url != null && url != ''){
                  window.location.href = url
              }
            },
            onSearch() {
                if (this.storeName) {
                    this.$store.commit("SET_STORE_NAME", this.storeName)
                    this.$router.push("/store")
                } else {
                    Toast('请输入商家品牌');
                }
            },
            showAD() {
                this.$api.advert.advertList({field: 'isShow', value: '显示', type: '首页-轮播广告'}).then(res => {
                    if (res.code == 0) {
                        var data = JSON.parse(res.data)
                        this.swipeImgUrls = data.adverJsonList
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            fetchAdvertise() {
                //首页-广告位
                this.$api.advert.advertList({field: 'isShow', value: '显示', type: '首页-广告位'}).then(res => {
                    if (res.code == 0) {
                        var data = JSON.parse(res.data)
                        this.advertiseList = data.adverJsonList
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            clearCache() {
                alert("清除缓存")
                Cookies.remove('token')
                this.$store.commit("setUserInfo", null)
            }
        },
        beforeRouteLeave(to, from, next) {
            this.storeName = ''
            next()
        }
    }
</script>
<style lang="less">
    @import "../assets/less/base";

    .home {
        .swipe-wrapper {
            .swipe-img {
                width: 100%;
            }
        }
        .grid-wrapper {
            .grid-item {
                height: 100px;
                padding: 2px;
                /*border: 1px solid #9dc6ed;*/
                .icon {
                    display: block;
                    margin: 10px auto;
                    width: 50px;
                    height: 50px;
                }
                .title {
                    display: block;
                    text-align: center;
                    .fz(14px)
                }
            }
        }
        .activity-wrapper {
            .img-wrapper {
                width: 100%;
                .bg-type {
                    width: 100%;
                    &:last-child {
                        padding-bottom: 10px;
                    }
                }
            }
        }
    }

</style>
